<template>
	<view class="main">
		<u-navbar :title="state.ztitle" :autoBack="true" :placeholder="true" :titleStyle="state.titleStyle" :height="40"
			bgColor="#fff">
		</u-navbar>
		<view class="title">
			帖子信息
		</view>
		<view class="line">
			<text>帖子标题</text>
			<input type="text" v-model="state.title" placeholder="请输入帖子标题" />
		</view>
		<view class="line">
			<text>自我介绍</text>
			<input type="text" v-model="state.jieshao" placeholder="请输入自我介绍" />
		</view>
		<view class="line" v-if="state.type!='1'">
			<text>价格</text>
			<input type="text" v-model="state.maxprice" placeholder="请输入价格"/>
		</view>
		<view class="title">
			基本信息
		</view>
	<!-- 	<view class="lines" v-if="type!='2'">
			<text>昵称</text>
			<input type="text" v-model="state.name" placeholder="请输入昵称"/>
		</view> -->
		<view class="lines">
			<text>年龄</text>
			<input type="text" v-model="state.age" placeholder="请输入年龄" />岁
		</view>
		<view class="lines">
			<text>身高</text>
			<input type="text" v-model="state.height" placeholder="请输入身高" />cm
		</view>
		<view class="lines"  v-if="state.type=='2'">
			<text>技能</text>
			<input type="text" v-model="state.skill" placeholder="请输入技能" />
		</view>
		<view class="lines" v-if="state.type!='2'" @click="state.show=true">
			<text>所在城市</text>
			<input type="text" v-model="state.address" placeholder="请选择所在城市" disabled />
			<image @click="state.show=true" src="../../static/me_shezhi_icon_more@2x.png" mode=""></image>
		</view>
		<view class="lines rigths"  v-if="state.type!='2'">
			<text>联系类型</text>
			<text class='xuanze' @click="state.typeShow=true">{{state.type_one}}</text>
			<!-- <input type="text" :disabled='true'  v-model="state.type_one" placeholder="请选择微信、QQ、手机号其一" /> -->
		</view>
		
		<view class="lines"  v-if="state.type!='2'">
			<text>联系方式</text>
			<input type="text" v-model="state.tel" placeholder="请输入联系方式" />
		</view>
		<view class="lines">
			<text>营业时间</text>
			<input type="text" v-model="state.busihours" placeholder="请输入营业时间" />
		</view>
		<view class="title">
			选择类型
		</view>
		<view class="select">
			<view v-for="val,index in state.source" :key="index">
				<view class="tab" v-if="showTab(index)" style="background-color: #1BDDD0;color: #fff;" @click="unselect(index)">{{val.lable}}</view>
				<view class="tab" v-else @click="select(index)">{{val.lable}}</view>
			</view>
		</view>
		<view class="title">
			照片墙
		</view>
		<view class="pictures">
			<view class="pic" v-for="item,index in state.list" :key="index">
				<image :src="item" mode=""></image>
				<view class="delete" @click="delete_it(index)">
					<image src="../../static/me_tuan_icon_delete@2x.png" mode=""></image>
				</view>
			</view>
			<view class="add" @click="chooseImage">
				<image src="../../static/me_icon_addimg@2x.png" mode=""></image>
			</view>
		</view>
		<view class="button" @click="add">
			<image src="../../static/icon_save@2x.png" mode=""></image>
			<text>确认创建</text>
		</view>
		<u-picker :show='state.typeShow' @cancel="state.typeShow=false" :columns="state.fxType"  @confirm="isType" keyName="name"></u-picker>
		<u-picker :show='state.show' :defaultIndex="[0,0,0]" @cancel="state.show=false" :columns="state.columns" @change="confirm" @confirm="isDz" keyName="name"></u-picker>
	</view>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const state = reactive({
		show:false,
		typeShow:false,
		columns:[],
		ztitle:'个人信息',
		fxType:[['微信','QQ','手机号']],
		titleStyle: 'fontWeight:bold',
		source:[],
		isSource:[],
		selected:[],//选中的类别
		list:[],
		title:"",
		name:"",
		images:"",
		maxprice:"",
		age:"",
		height:"",
		address:"",
		busihours:"",
		province_id:"",
		city_id:"",
		domain_id:"",
		province_name:"",
		city_name:"",
		domain_name:"",
		tel:"",
		type_one:"请选择微信、QQ、手机号其一",
		jieshao:"",
		lable_id:"",
		skill:"",
		type:'',
		id:'',
		authentication:'',//认证状态:0=未认证,1=认证中,2=个人认证,3=团体认证',
	})
	onLoad((options) => {
		state.type = options.type
		if(options.type==2){
			state.ztitle='创建新人'
		}else{
			state.ztitle='个人信息 '
		}      
		if(options.id){
			state.id = options.id
		}
		getAddress()
		getTab()
		getuserInfo()
	})
	// 个人信息
	async function getuserInfo() {
		const {code,data} = await sheep.$api.user.userInfo({
			token:uni.getStorageSync('token'),
		})
		if (code == 1) {
		   state.authentication=data.authentication
		}
	}
	function showTab(index){
		for(let i=0;i<state.isSource.length;i++){
			if(state.isSource[i]==state.source[index].id){
				return true
			}
		}
	}
	async function getTab(){
		const {code,data} = await sheep.$api.test.lableIndex({})
		if (code == 1) {
		   state.source=data
		   if(state.id!=''&&state.id!=0){
				getInfo()
		   }
		}
	}
	async function getInfo(){
		const {code,data} = await sheep.$api.zqzApi.infoPush({
			token:uni.getStorageSync('token'),
			fabu_id:state.id
		})
		if(code=='1'){
			if(data.lable_id!='')state.isSource = data.lable_id.split(',')
			if(data.images!='')state.list = data.images.split(',')
			state.title=data.title
			state.name=data.name
			state.images=data.images
			state.maxprice=data.maxprice
			state.age=data.age
			state.height=data.height
			state.address=data.address
			state.busihours=data.busihours
			state.province_id=data.province_id
			state.city_id=data.city_id
			state.domain_id=data.domain_id
			state.province_name=data.province_name
			state.city_name=data.city_name
			state.tel=data.tel
			state.type_one=data.type_one
			state.jieshao=data.jieshao
			state.lable_id=data.lable_id
			state.skill=data.skill
		}
	}
	function confirm(val){
		let data = state.columns[val.columnIndex][val.index]
		if(data.level=='1'){
			getAddress1(2,data.id,1)
		}
		if(data.level=='2'){
			getAddress2(3,data.id,1)
		}
	}
	function isType(e){
		state.type_one = e.value[0]
		state.typeShow=false
	}
	//获取地区
	function isDz(e){
		state.address = e.value[0].name+e.value[1].name+e.value[2].name
		state.province_id = e.value[0].id
		state.city_id = e.value[1].id
		state.domain_id = e.value[2].id
		state.province_name = e.value[0].name
		state.city_name = e.value[1].name
		state.domain_name = e.value[2].name
		state.show =false
	}
	async function getAddress(){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:1,
			pid:0
		})
		state.columns.push(data)
		getAddress1(2,data[0].id)
	}
	async function getAddress1(level,pid,type){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:level,
			pid:pid
		})
		if(type==1){
			state.columns[1]=data
		}else{
			state.columns.push(data)
		}
		
		getAddress2(3,data[0].id,type)
	}
	async function getAddress2(level,pid,type){
		const {code,data} = await sheep.$api.zqzApi.area({
			level:level,
			pid:pid
		})
		if(type==1){
			state.columns[2]=data
		}else{
			state.columns.push(data)
		}
	}
	
	async function add(){
		let nr={}
		if(state.busihours==''){
			uni.showToast({
			  title: '请输入营业时间',
			  icon: 'none',
			  mask: true,
			});
			return false
		}
		if(state.isSource.length>3){
			uni.showToast({
			  title: '最多选三个类型',
			  icon: 'none',
			  mask: true,
			});
			return false
		}
		if(state.type=='1'){
			// if(state.authentication!=2){
			// 	uni.showToast({
			// 	  title: '请先完成个人认证',
			// 	  icon: 'none',
			// 	  mask: true,
			// 	});
			// 	return false
			// }
			// 个人认证发布
			nr = {
				id:state.id,
				token:uni.getStorageSync('token'),
				title:state.title,
				name:state.name,
				images:state.list.join(','),
				age:state.age,
				height:state.height,
				address:state.address,
				busihours:state.busihours,
				province_id:state.province_id,
				city_id:state.city_id,
				domain_id:state.domain_id,
				province_name:state.province_name,
				city_name:state.city_name,
				domain_name:state.domain_name,
				tel:state.tel,
				type_one:state.type_one,
				jieshao:state.jieshao,
				lable_id:state.isSource.join(','),
				skill:state.skill
			}
		}else{
			if(state.authentication!=3){
				uni.showToast({
				  title: '请先完成团体认证',
				  icon: 'none',
				  mask: true,
				});
				return false
			}
			if(state.maxprice==''){
				uni.showToast({
				  title: '请输入价格',
				  icon: 'none',
				  mask: true,
				});
				return false
			}
			nr = {
				id:state.id,
				token:uni.getStorageSync('token'),
				title:state.title,
				name:state.name,
				images:state.list.join(','),
				maxprice:state.maxprice,
				age:state.age,
				height:state.height,
				address:state.address,
				busihours:state.busihours,
				province_id:state.province_id,
				city_id:state.city_id,
				domain_id:state.domain_id,
				province_name:state.province_name,
				city_name:state.city_name,
				domain_name:state.domain_name,
				tel:state.tel,
				type_one:state.type_one,
				jieshao:state.jieshao,
				lable_id:state.isSource.join(','),
				skill:state.skill
			}
		}
		if(state.id==''||state.id==0){

			const {code,data} = await sheep.$api.zqzApi.pushAdd(nr)
			if(code=='1'){
				uni.showToast({
				  title: '提交成功',
				  icon: 'none',
				  mask: true,
				});
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},2000)
			}
		}else{
			const {code,data} = await sheep.$api.zqzApi.setPush(nr)
			if(code=='1'){
				uni.showToast({
				  title: '提交成功',
				  icon: 'none',
				  mask: true,
				});
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},2000)
			}
		}
		
		// if(state.id==''){
			
		// }else{
		// 	const {code,data} = await sheep.$api.zqzApi.setPush(nr)
		// 	if(code=='1'){
		// 		uni.showToast({
		// 		  title: '编辑成功',
		// 		  icon: 'none',
		// 		  mask: true,
		// 		});
		// 		setTimeout(()=>{
		// 			uni.navigateBack({
		// 				delta:1
		// 			})
		// 		},2000)
		// 	}
		// }
		
	}
	// 上传图片
	function chooseImage(){
		uni.chooseImage({
		    count:1, //默认9
		    sizeType: ["compressed"], //可以指定是原图还是压缩图，默认二者都有
		    sourceType: ["album", "camera"], //从相册选择
		    success: (res) => {
		        uni.uploadFile({
		            url:'https://laiyu.1122334455.cn/api/common/upload', 
		            filePath: res.tempFilePaths[0],
		            name:'file',   
		            formData: {
		                token: uni.getStorageSync('token')
		            },
		            success:(res) => {
						var data = JSON.parse(res.data)
						if(data.code == 1){
							state.list.push(data.data.fullurl)
						}
						
		            },
		            fail: (err) => {
		                console.log('uploadImage fail', err);
		            }
		        });
		    },
		});
	}
	
	function select(index) {
		if(state.isSource.length=='2'){
			uni.showToast({
				title: '最多可以选两个类型',
				icon: "none",
				mask: true,
				duration: 2000
			})
			return
		}
		state.isSource.push(state.source[index].id)
	}
	
	function unselect(index) {
		let i = state.isSource.indexOf(state.source[index].id)
		state.isSource.splice(i,1)
	}
	function delete_it(e){
		uni.showModal({
			title: '删除',
			content:'确认删除？',
			cancelText:'取消',
			confirmText:'确认',
			confirmColor:'#1BDDD0',
			cancelColor:'#999',
			success: function(res) {
				if (res.confirm) {
					uni.showToast({
						title: '删除成功',
						icon: "none",
						mask: true,
						duration: 2000
					})
					setTimeout(function() {
						state.list.splice(e,1);
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
		
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background-color: #F5F5F5;

		.main {
			background-color: #F5F5F5;
			padding-bottom: 34rpx;
			.title {
				margin: 32rpx 0 24rpx 32rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.line {
				padding: 36rpx 32rpx 24rpx;
				background-color: #fff;
				border-bottom: 2rpx solid #F5F5F5;

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;

				}

				input {
					font-size: 28rpx;
					margin-top: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
				}
			}

			.lines {
				padding: 36rpx 32rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F5F5F5;
				font-size: 28rpx;

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;

				}

				input {
					margin-left: auto;
					font-size: 28rpx;
					margin-right: 8rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					text-align: right;
					width: 70%;
				}

				image {
					height: 32rpx;
					width: 32rpx;
				}
			}
            .rigths{
				.xuanze{
					margin-left: auto;
					font-size: 28rpx;
					margin-right: 8rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #999999;
					text-align: right;
					width: 70%;
				}
				 
		    }
			.select {
				padding: 32rpx;
				padding-bottom: 12rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				flex-flow: wrap;
				.tab {
					margin-right: 32rpx;
					padding: 8rpx 20rpx;
					border-radius: 26rpx;
					font-size: 24rpx;
					background: #F6F7F8;
					color: #666666;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					margin-bottom: 20rpx;
				}
			}
			.pictures{
				display: flex;
				align-items: center;
				padding: 24rpx 32rpx;
				background-color: #fff;
				.pic{
					height: 160rpx;
					width: 160rpx;
					margin-right: 16rpx;
					position: relative;
					image{
						height: 160rpx;
						width: 160rpx;
						border-radius: 24rpx;
					}
					.delete{
						position: absolute;
						z-index: 999;
						height: 48rpx;
						width: 48rpx;
						box-sizing: border-box;
						right: 0;
						top: 0;
						padding:0 12rpx;
						background: rgba(0,0,0,0.5);
						border-radius: 0px 24rpx 0px 24rpx;
						image{
							height: 24rpx;
							width: 24rpx;
						}
						
					}
				}
				.add{
					padding: 48rpx;
					background: #F8F7FB;
					border-radius: 24rpx;
					image{
						height: 64rpx;
						width: 64rpx;
					}
				}
			}
			.button{
				display: flex;
				align-items: center;
				background: #FFFFFF;
				border-radius: 54rpx;
				border: 2rpx solid #333333;
				padding: 30rpx 246rpx;
				box-sizing: border-box;
				width: 92%;
				margin: 60rpx auto 0rpx;
				image{
					height: 48rpx;
					width: 48rpx;
					margin-right: 16rpx;
				}
				text{
					font-size: 32rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #333333;
				}
			}
		}
	}
</style>